import React from 'react'
import {Text, View} from "react-native";
import WingBlank from "@ant-design/react-native/es/wing-blank/index";
import Icon from "@ant-design/react-native/es/icon/index";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import Nav from "../common/nav";
import Card from "@ant-design/react-native/es/card/index";
import ModalDropdown from 'react-native-modal-dropdown';
import {Flex} from "@ant-design/react-native";
import Styles from '../common/styles'
import Tag from "@ant-design/react-native/es/tag/index";
import ListView from "@ant-design/react-native/es/list-view/index";
import {Actions} from 'react-native-router-flux'

const orderData = [
  {
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  },
  {
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  },
  {
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  },
  {
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  },
  {
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  }
]


export default class HomePage extends React.Component {
  state = {
    value: ''
  }
  onFetch = async (
    page = 1,
    startFetch,
    abortFetch
  ) => {
    try {
      let pageLimit = 30;
      startFetch(orderData, pageLimit);
    } catch (err) {
      abortFetch(); //manually stop the refresh or pagination if it encounters network error
    }
  };
  renderItem = (data) =>{
    return <View><Card>
      <Card.Header
        title={<Text style={Styles.defaultFontSize}>{data.carName}</Text>}
      />
      <Card.Body>
        <View style={{flexDirection: 'column', paddingHorizontal: 15}}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text>工期：{data.projectTime}天</Text>
            <Text>需求数量：{data.number}台</Text>
          </View>
          <WhiteSpace size='xs'/>
          <Text>单价：{data.projectPrice}元/天/台</Text>
          <WhiteSpace size='xs'/>
          <Text>进场时间：{data.enterTime}</Text>
          <WhiteSpace size='xs'/>
          <Text>施工地点：{data.address}</Text>
        </View>
      </Card.Body>
      <Card.Footer
        content={
          <View style={{
            borderTopWidth: 1, borderTopColor: '#ececec'
          }}>
            <WhiteSpace/>
            <View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
              <Text>已有{data.count}人接单</Text>
              <Tag small>{data.status}</Tag>
              <Text style={Styles.defaultFontColor}
              onPress={()=>Actions.grabOrder()}>立即接单</Text>
            </View>
          </View>
        }
      />
    </Card>
      <WhiteSpace size='lg'/>
    </View>
  }
  render() {
    return <View style={{height:'75%'}}>

      <WhiteSpace/>
      <Nav/>
      <WhiteSpace size="lg"/>
      <WingBlank size="lg">
        <Flex justify="around">
          <Flex>
            <ModalDropdown
              onSelect={(index, value) => {
                this.setState({value})
              }}
              textStyle={{
                fontSize: 14,
                color: 'rgb(16, 142, 233)',
                textAlignVertical: 'center',
              }}
              defaultValue={'车型选择'}
              options={['车型选择', '重型卡车', '轻型卡车']}/>
            <Icon name='down' size='xxs' color='rgb(16, 142, 233)'/>
          </Flex>
          <Flex>
            <ModalDropdown
              textStyle={{
                fontSize: 14,
                color: 'rgb(16, 142, 233)',
                textAlignVertical: 'center',
              }}
              defaultValue={'施工区域'}
              options={['北京市', '西安市']}/>
            <Icon name='down' size='xxs' color='rgb(16, 142, 233)'/>
          </Flex>
        </Flex>
        <WhiteSpace size="lg"/>
        <ListView
          onFetch={this.onFetch}
          renderItem={this.renderItem}
          numColumns={ 1}
        />
      </WingBlank>

    </View>
  }
}